<template>
  <div id="hotLeft">
    <ul class="qleft-top">
      <li class="focus">
        <i class="el-icon-discover"></i>
        <a href="#">发现</a>
      </li>
      <li>
        <i class="el-icon-star-off"></i>
        <a href="#">关注</a>
      </li>
      <li>
        <i class="el-icon-data-analysis"></i>
        <a href="#">我的圈子</a>
      </li>
      <li>
        <i class="el-icon-collection"></i>
        <a href="#">推荐圈子</a>
      </li>
    </ul>
    <ul class="qleft-bottom">
      <li><a href="#">技术交流圈</a></li>
      <li><a href="#">打工人的日常</a></li>
      <li><a href="#">掘友请回答</a></li>
      <li><a href="#">内推招聘广场</a></li>
      <li><a href="#">上班摸的鱼</a></li>
      <li><a href="#">更多</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "hotLeft",
  data(){
    return{
      form: {
        hotword:''
      }
    }
  }
}
</script>

<style>
#hotLeft{
  width: 160px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 4px;
  height: fit-content;
}
.qleft-top .focus{
  color: #1E80FF;
  background-color: #EAF2FF;
  border-radius: 5px;
}
.qleft-top .focus a{
  color: #1E80FF;
}
.qleft-top li{
  color: #252933;
  font-size: 16px;
  width: calc(100% - 24px);
  height: 50px;
  line-height: 50px;
  padding: 0 12px;
  cursor: pointer;
}
.qleft-top li i{
  font-size: 18px;
}
.qleft-top li a{
  color: #252933;
  text-decoration: none;
  margin-left: 8px;
}
.qleft-top li:hover{
  color: #1E80FF;
  background-color: #F7F8FA;
}
.qleft-top li:hover a{
  color: #1E80FF;
}
.qleft-bottom{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.qleft-bottom li{
  height: 45px;
  width: calc(100% - 35px);
  padding-left: 35px;
  line-height: 45px;
}
.qleft-bottom li a{
  color: #8a919f;
  text-decoration: none;
  font-size: 15px;
}
.qleft-bottom li:hover{
  background-color: #F7F8FA;
}
.qleft-bottom li:hover a{
  color: #1E80FF;
}
</style>